{% extends "./layout/base.njk" %}
{% set current = "index" %}

{% block content %}
{% include "./include/header.njk" %}
<div class="container mx-auto p-4">
	<div x-data="counter">
		<h1 class="mb-4 text-4xl font-bold" x-text="data"></h1>
		<div class="flex gap-3">
			<button class="py-2 px-4 rounded bg-blue-500 text-white" @click="increment">INC</button>
			<button class="py-2 px-4 rounded bg-red-500 text-white" @click="decrement">DEC</button>
			<button :disabled="data === 0" :class="{'opacity-50':data === 0}" class="py-2 px-4 rounded bg-gray-500 text-white"
				@click="reset">RESET</button>
		</div>
	</div>
</div>
{% endblock %}

{% block script %}
<script src="{{jsPath}}/index.min.js"></script>
{% endblock %}
